<template>
	<view>
		<view class="box-pading" v-if="user.position && user.position !== 999">
			<view class="total">
				<view class="total-title flex-no-horizontal bold f-xl">
					<view class="left">
						<image src="../../static/icon/icon-examine.png" mode=""></image>
						本月审核数据
					</view>
					<view class="btn" v-if="user.position === 998">
						<button type="default" @click="toExApply">重新申请</button>
					</view>
				</view>
				
				<view class="total-item flex-no-horizontal">
					<view class="total-item-content">
						<view class="total-item-content-title">
							累计审核条数：
						</view>
						<view class="total-item-content-num f-large bold">
							{{data.checkNum}} <text>条</text>
						</view>
					</view>

					<view class="total-item-content">
						<view class="total-item-content-title">
							平均每条审核时长：
						</view>
						<view class="total-item-content-num">
							{{(data.averageDuration/60).toFixed(4)}} <text>分钟</text>
						</view>
					</view>
				</view>

				<view class="total-item flex-no-horizontal">
					<view class="total-item-content">
						<view class="total-item-content-title">
							累计元石奖励：
						</view>
						<view class="total-item-content-num">
							{{(data.award).toFixed(1)}} <text>元石</text>
						</view>
					</view>

					<view class="total-item-content">
						<view class="total-item-content-title">
							累计违规次数：
						</view>
						<view class="total-item-content-num">
							{{data.illegalNum}} <text>次</text>
						</view>
					</view>
				</view>

				<view class="total-item flex-no-horizontal">
					<view class="total-item-content">
						<view class="total-item-content-title">
							累计审核时长：
						</view>
						<view class="total-item-content-num">
							{{(data.allDuration/3600).toFixed(4)}} <text>小时</text>
						</view>
					</view>

					<view class="total-item-content">
						<view class="total-item-content-title">
							错判比例：
						</view>
						<view class="total-item-content-num">
							{{data.wrongProportion}}
						</view>
					</view>
				</view>

			</view>

			<view class="dynamic flex-no-horizontal" @click="toPage('dynamic')">

				<view class="dynamic-item">
					<view class="dynamic-title f-xl bold">
						动态审核
						<text>今日审核</text>
						<text>{{data.DayCheckArticles}}</text>
					</view>
					<view class="dynamic-subhead">
						判定动态质量，决定动态是否能发布成功
					</view>
				</view>

				<u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon>

			</view>

			<view class="dynamic flex-no-horizontal comment" @click="toPage('comment')">

				<view class="dynamic-item">
					<view class="dynamic-title f-xl bold">
						评论审核
						<text>今日审核</text>
						<text>{{data.daycheckComments}}</text>
					</view>
					<view class="dynamic-subhead">
						判定评论内容，决定该评论是否有效
					</view>
				</view>

				<u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon>

			</view>

			<view class="dynamic flex-no-horizontal report" @click="toPage('report')">

				<view class="dynamic-item">
					<view class="dynamic-title f-xl bold">
						举报审核
						<text>今日审核</text>
						<text>{{data.DayCheckAppeals}}</text>
					</view>
					<view class="dynamic-subhead">
						判定举报内容，决定该举报内容是否有效
					</view>
				</view>

				<u-icon name="arrow-right" color="#FFFFFF" size="28"></u-icon>

			</view>

		</view>

		<!-- 普通用户 -->
		<view class="ordinary box-pading" v-else>
			<view style="text-align: center;">
				<image src="../../static/img/examine-ordinary.png" mode="aspectFit"></image>
			</view>

			<view class="ordinary-title f-xl bold">
				审核员申请
			</view>
			<view class="ordinary-subhead f-xs">
				申请成为社区审核员，共同维护社区和谐氛围
			</view>

			<view class="ordinary-btn">
				<button type="default" @click="toPage('examineApply')" v-if="user.position !== 999">立即申请</button>
				<button type="default" style="background-color: #F0F0F0;color: #000000;" v-else>审核中</button>
			</view>

		</view>
		
		<tipsTime :ifShowCancel="false" :show="tipsTimeShow" @btnSuccessClick="tipsTimeShow = false">
			
			<view class="popup-text">
				审核限制期未结束，请在
			</view>
			<u-count-down :time="timeoutNum" format="DD:HH:mm:ss" @change="timeChange">
				<view class="time" v-if="timeData">
					<text class="time__item" v-if="timeData.days !== 0">{{ timeData.days }}天:</text>
					<text class="time__item">{{ timeData.hours >=10 ? timeData.hours: '0' + timeData.hours}}:</text>
					<text class="time__item">{{ timeData.minutes >=10 ? timeData.minutes: '0' + timeData.minutes}}:</text>
					<text class="time__item">{{ timeData.seconds }}</text>
				</view>
			</u-count-down>
			<view class="popup-text" style="margin-bottom: 20rpx;">
				后重新申请
			</view>
		</tipsTime>
		
	</view>
</template>

<script>
	import {
		getAuditDataApi,
		timeoutApi
	} from '../../api/examine.js'
	import {
		mapState
	} from 'vuex'
	import tipsTime from './common/tipsPopup.vue'
	export default {
		components:{
			tipsTime
		},
		data() {
			return {
				data: {
					DayCheckAppeals: 0,
					DayCheckArticles: 0,
					allDuration: 0,
					averageDuration: 0,
					award: 0,
					checkNum: 0,
					daycheckComments: 0,
					illegalNum: 0,
					wrongProportion: 0,
					uid: 0,
				},
				timeData: null,
				timeoutNum:0,
				tipsTimeShow:false,
			}
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		onLoad() {
			
		},
		onShow() {
			this.user.position && this.user.position !== 999 ? this.getAuditData() : ''
		},
		methods: {

			timeChange(e) {
				this.timeData = e
			},

			toPage(name) {
				if (this.user.position === 998) {
					uni.showToast({
						title: '您已被取消审核员资格',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `./${name}`
				})
			},
			async getAuditData() {
				if (!this.user.position) return
				try {
					uni.showLoading({
						mask: true
					})
					const res = await getAuditDataApi()
					this.data = res.data
					
					if (this.user.position === 998) {
						const timeRes = await timeoutApi()
						this.timeoutNum = timeRes.data * 1000
					}else{
						if (uni.getStorageSync('submitTime') && ((new Date().getTime()) - uni.getStorageSync('submitTime') < 180000)) {
							uni.navigateTo({
								url:'/' + uni.getStorageSync('path')
							})
						}
					}
					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					console.log(e)
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			toExApply() {
				if(this.timeoutNum > 0){
					this.tipsTimeShow = true
					return
				}
				uni.navigateTo({
					url: './examineApply'
				})
			},

		}
	}
</script>

<style lang="scss">
	.total {
		padding: 50rpx 40rpx 0 40rpx;
		border-radius: 20rpx;
		background-image: url(../../static/bg/bg-examine-index.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: 20rpx;

		.total-title {
			color: #FFFFFF;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 1);
			justify-content: space-between;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			.btn {
				button {
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #FFFFFF;
					background-color: rgba(55, 72, 224, 1);
				}

				button:after {
					border: 0;
				}
			}

		}

		.total-item {
			border-bottom: 1rpx solid rgba(255, 255, 255, 1);

			.total-item-content:first-of-type {
				border-right: 1rpx solid rgba(255, 255, 255, 1);
			}

			.total-item-content:nth-child(2) {
				padding-left: 40rpx;
			}

			.total-item-content {
				padding: 40rpx 0;
				width: 50%;

				.total-item-content-title {
					font-size: 22rpx;
					color: #FFFFFF;
					margin-bottom: 26rpx;
				}

				.total-item-content-num {
					color: #FFFFFF;

					text {
						font-size: 22rpx;
						font-weight: normal;
					}
				}
			}

		}

		.total-item:last-of-type {
			border-bottom: 0;
		}

	}

	.dynamic {
		background-image: url(../../static/bg/bg-examine-dynamic.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 40rpx;
		border-radius: 20rpx;
		justify-content: space-between;
		margin-top: 30rpx;

		.dynamic-item {

			.dynamic-title {
				color: #FFFFFF;

				text:nth-child(1) {
					font-size: 22rpx;
					font-weight: normal;
					margin: 0 10rpx 0 30rpx;
				}

				text:nth-child(2) {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.dynamic-subhead {
				margin-top: 30rpx;
				color: #FFFFFF;
				font-size: 22rpx;
			}

		}

	}

	.comment {
		background-image: url(../../static/bg/bg-examine-comment.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.report {
		background-image: url(../../static/bg/bg-examine-report.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.ordinary {
		margin-top: 30rpx;

		.ordinary-title {
			text-align: center;
			color: #000000;
			margin-bottom: 26rpx;
		}

		.ordinary-subhead {
			text-align: center;
			color: #000000;
		}

		.ordinary-btn {
			margin-top: 60rpx;
			text-align: center;

			button {
				width: 478rpx;
				height: 98rpx;
				background-color: #000000;
				color: #FFFFFF;
				border-radius: 49.5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			button:after {
				border: 0;
			}

		}
	}
	
	.popup-text {
		color: rgba(0, 0, 0, 1);
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
	}
	
	.time{
		text-align: center;
		margin: 20rpx 0;
	}
</style>
